<template>
  <!-- 患者来源 -->
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="新增日期">
          <el-date-picker
            v-model="form.startTime"
            :clearable="false"
            class="pay_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          ></el-date-picker>----
          <el-date-picker
            style="marigin-left:4%;"
            v-model="form.endTime"
            :clearable="false"
            class="pay_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          ></el-date-picker>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
          <el-button type="primary" style="float:right;" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
      <div ref="circlechart" class="chart_box"></div>
      <div ref="sourcechart" v-if="showsource" class="chart_box"></div>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th style="text-align:center;font-size:18px;" colspan="21">患者统计报表</th>
          </tr>
          <tr>
            <th>首次登记日期</th>
            <th>患者姓名</th>
            <th>患者性别</th>
            <th>患者年龄</th>
            <th>患者电话</th>
            <th>具体来源</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.gmtCreate}}</td>
            <td>{{item.patientName}}</td>
            <td>{{item.sex | toSex}}</td>
            <td>{{item.age}}</td>
            <td>{{item.mobile}}</td>
            <td>{{item.remark}}</td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager"  @change-pagenum="getDataList"></pager>
    </div>
    <br />
    <!-- <pager v-model="pager" @change-pagenum="getChartTable"></pager> -->
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    var labelOption = {
      normal: {
        show: false,
        formatter: "{c}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff"
          }
        }
      }
    };
    return {
      form: {
        startTime: "",
        endTime: "",
        hpId: "",
        source: "",
        tjDoctorId: ""
      },
      orderDayCount: {
        totality: 0,
        relatives: 0,
        weChat: 0,
        media: 0,
        microBlog: 0,
        other: 0,
        nearby: 0,
        employee: 0,
        activity: 0,
        diffuse: 0,
        introduce: 0
      },
      showsource:false,
      showDay: false,
      pager: { pageSize: 10, pageNum: 1,total:0 },
      tabList: [],
      chart: null,
      circlechart: null,
      option: {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          y: "center",
          // top: 20,
          data: []
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "65%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "case1" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      circleoption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          y: "center",
          // top: 20,
          data: []
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "65%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "case1" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.form.startTime = this.getDate();
    this.form.hpId = this.adminUser.hpId;
    this.form.endTime = this.getNewDate();
    this.getChartTable();
    this.getDataList();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api.selectPatientsWithSourceList(j).then(res => {
          if (res.executed) {
            // th.tabList = res.patientsWithSourceList;
            let list = res.patientsWithSourceList;
            let all_data = [];
            let order = {
              totality: 0,
              recommended: 0,
              agency: 0,
              platform: 0,
              propagandize: 0,
              introduced: 0,
              traveler: 0
            };
            for (let i = 0; i < list.length; i++) {
              all_data.push(list[i].totality);
              order.totality += Number(list[i].totality);
              order.recommended += Number(list[i].recommended);
              order.agency += Number(list[i].agency);
              order.platform += Number(list[i].platform);
              order.propagandize += Number(list[i].propagandize);
              order.introduced += Number(list[i].introduced);
              order.traveler += Number(list[i].traveler);
            }
            th.orderDayCount = order;
            let chart_title = ["医生推荐","机构推荐","平台宣传","活动宣传","客人介绍","散客"];
            let chart_data = [
              {
                name: "医生推荐",
                value: res.patientsSourceStatistics.recommended
              },
              {
                name: "机构推荐",
                value: res.patientsSourceStatistics.agency
              },
              {
                name: "平台宣传",
                value: res.patientsSourceStatistics.platform
              },
              {
                name: "活动宣传",
                value: res.patientsSourceStatistics.propagandize
              },
              {
                name: "客人介绍",
                value: res.patientsSourceStatistics.introduced
              },
              {
                name: "散客",
                value: res.patientsSourceStatistics.traveler
              }
            ];
            th.circleoption.legend.data = chart_title;
            th.circleoption.series[0].data = chart_data;
            // th.chart = echarts.init(th.$refs["linechart"]);
            th.circlechart = echarts.init(th.$refs["circlechart"]);
            // th.chart.setOption(th.option);
            const getDetail=function(param){
              th.form.source=param.name;
              th.getDataList();
              th.getSourceByList();
            }
            th.circlechart.on('click',getDetail)
            th.circlechart.setOption(th.circleoption);
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });  
    },
    getDataList(){
      const th=this;
      let j=Object.assign(th.form, th.pager);
      th.showLoading();
      th.$api.selectPatientsSourcePageV2(j).then(res=>{
         if(res.executed){
           th.tabList=res.dataBody.list;
           th.pager.total=res.dataBody.total;
           th.showLoading(false);
         }else{
           th.showLoading(false);
         }
      }).catch(err=>{
        th.showLoading(false);
      })
    },
    exportExcel() {
      let th = this;
      //导出
      let j = {};
      j = Object.assign(th.form, th.pager);
      j.pageSize = "1000";
      th.showLoading(true);
      th.$api.selectPatientsSourcePageV2(j).then(res => {
        if (res.executed) {
          if (res.patientsWithSourceList != undefined) {
            let data = res.patientsWithSourceList;
            Excel(
              data,
              [
                { key: "time", name: "日期" },
                { key: "totality", name: "新增人数" },
                { key: "recommended", name: "医生推荐" },
                { key: "agency", name: "机构推荐" },
                { key: "platform", name: "平台宣传" },
                { key: "propagandize", name: "活动宣传" },
                { key: "introduced", name: "客人介绍" },
                { key: "traveler", name: "散客" }
              ],
              "患者来源"
            );
          }
          th.showLoading(false);
        }
      });
    },
    getSourceByList(){
      const th=this;
      let j={}
      Object.assign(j,th.form)
      th.$api.getPatientsSourceCount(j).then(res=>{
         if(res.executed){
          if(res.dataBody.infoList){
          th.showsource=true;
          let info=res.dataBody.infoList;
           let titleList=[];
           let chartdata=[];
           info.forEach(it => {
             let arr={};
             arr.name=it.trueName;
             arr.value=it.count;
             titleList.push(it.trueName);
             chartdata.push(arr);
           });
            let chart_data = chartdata;
            th.option.legend.data = titleList;
            th.option.series[0].data = chart_data;
            setTimeout(function(){
              th.chart = echarts.init(th.$refs["sourcechart"]);
              th.chart.setOption(th.option);
            },500)
           }else{
             th.chart=null;
             th.showsource=false;
           }
         }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  height: 400px;
  display: inline-block;
  width: 49%;
}
</style>